<template>
    <div id="app">
        <!-- <input
            v-model="todo.title"
            v-for="(todo, index) in todos"
            :key="index"
        /> -->
        <div class="todos">
            <todo
                v-for="(todo, index) in todos"
                :key="index"
                :todo="todo"
                @del="delTodo"
            />

            <input v-model="content" @keyup.enter="submit" />
        </div>
        <!-- <users /> -->
    </div>
</template>

<script>
import Todo from "./components/Todo.vue";
// import Users from "./VModel/Users.vue";
export default {
    components: { Todo },
    data() {
        return {
            content: "",
            todos: [
                { id: 1, title: "讲VUE.JS todo" },
                { id: 2, title: "看大江大河" }
            ]
        };
    },
    methods: {
        submit() {
            if (this.content.trim()) {
                this.todos.push({
                    id: this.todos.length + 1,
                    title: this.content
                });
                this.content = "";
            }
        },
        delTodo(todo) {
            const pos = this.todos.findIndex(t => t.id == todo.id);
            this.todos.splice(pos);
        }
    }
};
</script>

<style>
.todos {
    width: 400px;
    margin: 0 auto;
}
.todos > input {
    width: 100%;
    padding: 5px;
}
</style>
